<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>marker轨迹回放-全局模式</title>
</head>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<style type="text/css">
    html,
    body {
        height: 100%;
        margin: 0px;
        padding: 0px;
    }

    #container {
        width: 100%;
        height: 100%;
    }
</style>

<body>
<div id="container"></div>
<script type="text/javascript">
  var center = new TMap.LatLng(34.797939, 113.893335);
  // 初始化地图
  var map = new TMap.Map('container', {
    zoom: 12,
    center: center,
  });

  var path = [
    new TMap.LatLng(34.797939,113.893335),
    new TMap.LatLng(34.782266,113.915968),
    new TMap.LatLng(34.792348,113.921140),
    new TMap.LatLng(34.768813,113.931400),
    new TMap.LatLng(34.774752,113.940015),
  ];

  var polylineLayer = new TMap.MultiPolyline({
    map, // 绘制到目标地图
    // 折线样式定义
    styles: {
      style_blue: new TMap.PolylineStyle({
        color: '#3777FF', // 线填充色
        width: 4, // 折线宽度
        borderWidth: 2, // 边线宽度
        borderColor: '#FFF', // 边线颜色
        lineCap: 'round', // 线端头方式
        eraseColor: 'rgba(190,188,188,1)',
      }),
    },
    geometries: [
      {
        id: 'erasePath',
        styleId: 'style_blue',
        paths: path,
      },
    ],
  });

  var marker = new TMap.MultiMarker({
    map,
    styles: {
      'car-down': new TMap.MarkerStyle({
        width: 40,
        height: 40,
        anchor: {
          x: 20,
          y: 20,
        },
        faceTo: 'map',
        rotate: 180,
        src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/car.png',
      }),
      start: new TMap.MarkerStyle({
        width: 25,
        height: 35,
        anchor: { x: 16, y: 32 },
        src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/start.png',
      }),
      end: new TMap.MarkerStyle({
        width: 25,
        height: 35,
        anchor: { x: 16, y: 32 },
        src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/end.png',
      }),
    },
    geometries: [
      {
        id: 'car',
        styleId: 'car-down',
        position: new TMap.LatLng(34.797939, 113.893335),
      },
      {
        id: 'start',
        styleId: 'start',
        position: new TMap.LatLng(34.797939, 113.893335),
      },
      {
        id: 'end',
        styleId: 'end',
        position: new TMap.LatLng(34.774752,113.940015),
      },
    ],
  });
  // 使用marker 移动接口， https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocMarker
  marker.moveAlong(
    {
      car: {
        path,
        speed: 2500,
      },
    },
    {
      autoRotation: true,
    }
);
  marker.on('moving', (e) => {
    var passedLatLngs = e.car && e.car.passedLatLngs;
    if (passedLatLngs) {
      // 使用路线擦除接口 eraseTo, https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocVector
      polylineLayer.eraseTo(
        'erasePath',
        passedLatLngs.length - 1,
        passedLatLngs[passedLatLngs.length - 1]
      );
    }
  });
</script>
</body>

</html>
